<template>
  <transition name="move" @after-leave="afterLeave">
    <div class="food" v-show="visible">
      <cube-scroll ref="foodDetail">
        <div class="food-content">
          <div class="image-header">
            <img :src="food.image" />
            <div class="back" @click="hide">
              <i class="icon-arrow_lift"></i>
            </div>
          </div>
          <div class="content">
            <h1 class="title">{{food.name}}</h1>
            <div class="detail">
              <span>月售{{food.sellCount}}份</span>
              <span>好评率{{food.rating}}%</span>
            </div>
            <div class="price">
              <span class="now">￥{{food.price}}</span>
              <span class="old" v-if="food.oldPrice">￥{{food.oldPrice}}</span>
            </div>
            <div class="buy-control">
              <cart-control :food="food" v-show="food.count" @add="addFood"></cart-control>
            </div>
            <transition name="fade">
              <div class="buy" v-show="!food.count" @click="addFirst">加入购物车</div>
            </transition>
          </div>
          <split></split>
          <div class="content">
            <h2 class="title">商品介绍</h2>
            <p class="info">{{food.info}}</p>
            <p class="info" v-if="!food.info">暂无商品介绍</p>
          </div>
          <split></split>
          <div class="content">
            <h2 class="title">商品评价</h2>
            <rating-select
              :ratings="ratings"
              :rating-type="ratingType"
              :is-active-num="isActiveNum"
              :only-content="onlyContent"
              @select="onSelect"
              @toggle="onToggle"
            ></rating-select>
          </div>
          <div class="line"></div>
          <div class="content">
            <rating-list
              :main="false"
              :is-active-num="isActiveNum"
              :only-content="onlyContent"
              :ratings="ratings"
            ></rating-list>
          </div>
        </div>
      </cube-scroll>
    </div>
  </transition>
</template>

<script>
import popupMixin from '../../common/mixins/popup'
import moment from 'moment'
import CartControl from '../cart-control/cart-control.vue'
import Split from '../split/split.vue'
import RatingSelect from '../rating-select/rating-select.vue'
import RatingList from '../ratings-list/rating-list.vue'

const EVENT_SHOW = 'show'
const EVENT_LEAVE = 'leave'
const EVENT_ADD = 'add'

const ALL = 2
const RECOMMEND = 0
const NEGATIVE = 1

export default {
  mixins: [popupMixin],
  name: 'food',
  props: {
    food: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  data() {
    return {
      isActiveNum: ALL,
      onlyContent: false,
      ratingType: [{
        type: ALL,
        label: '全部'
      }, {
        type: RECOMMEND,
        label: '推荐'
      }, {
        type: NEGATIVE,
        label: '吐槽'
      }]
    }
  },
  created() {
    this.$on(EVENT_SHOW, () => {
      this.$nextTick(() => {
        this.$refs.foodDetail.refresh()
      })
    })
  },
  computed: {
    ratings() {
      return this.food.ratings
    },
    computedRatings() {
      let ret = []
      this.ratings.forEach((rating) => {
        if (this.onlyContent && !rating.text) {
          return
        }
        if (this.isActiveNum === ALL || rating.rateType === this.isActiveNum) {
          ret.push(rating)
        }
      })
      return ret
    }
  },
  methods: {
    addFirst(e) {
      this.$set(this.food, 'count', 1)
      this.$emit(EVENT_ADD, e.target)
    },
    addFood(target) {
      this.$emit(EVENT_ADD, target)
    },
    format(date) {
      return moment(date).format('YYYY-MM-DD hh:mm')
    },
    afterLeave() {
      this.isActiveNum = 2
      this.onlyContent = false
      this.$emit(EVENT_LEAVE)
    },
    onSelect(index) {
      this.isActiveNum = index
    },
    onToggle() {
      this.onlyContent = !this.onlyContent
    }
  },
  components: {
    CartControl,
    Split,
    RatingSelect,
    RatingList
  }
}
</script>
<style lang='stylus' scoped>
@import '../../common/stylus/variable.styl'
@import '../../common/stylus/mixin.styl'

.line
  border-1px($color = $color-row-line)
.food
  position fixed
  top 0
  bottom 48px
  width 100%
  background $color-white
  &.move-enter-active, &.move-leave-active
    transition all ease 0.3s
  &.move-enter, &.move-leave-active
    transform translate3d(100%, 0, 0)
  .image-header
    position relative
    padding-top 100%
    width 100%
    height 0
    border-1px()
    img
      position absolute
      top 0
      width 100%
      height 100%
    .back
      position absolute
      padding 18px
      top 10px
      .icon-arrow_lift
        font-size $fontsize-large-xx
        color $color-white
  .content
    position relative
    padding 18px
    h1.title
      line-height 14px
      font-size $fontsize-medium
      font-weight 700
      color $color-text
    h2.title
      line-height 14px
      font-size $fontsize-medium
      color $color-text
    .detail
      margin-top 8px
      span
        display inline-block
        font-size $fontsize-small-s
        color $color-text-ss
        margin-right 10px
    .price
      margin-top 18px
      .now
        display inline-block
        font-size $fontsize-medium
        font-weight 700
        color $color-red
        margin-right 10px
      .old
        text-decoration line-through
        font-size $fontsize-small-s
        color $color-text-ss
    .buy-control
      position absolute
      right 18px
      bottom 15px
    .buy
      position absolute
      right 18px
      bottom 15px
      display inline-block
      box-sizing border-box
      min-width 74px
      height 24px
      line-height 12px
      padding 6px 12px
      border-radius 12px
      background $color-blue
      color $color-white
      font-size $fontsize-small-s
      &.fade-enter-active, &.fade-leave-active
        transition all 0.3s
      &.fade-enter, &.fade-leave-active
        opacity 0
        z-index -1
    .info
      padding 6px 8px
      line-height 24px
      font-size $fontsize-small
      color $color-text-s
      font-weight 200
    .ratings-select
      .rating-type
        display flex
        margin 18px 0
        .item
          min-width 40px
          height 16px
          padding 8px 12px
          margin-right 8px
          line-height 16px
          border-radius 2px
          font-size $fontsize-small
          text-align center
          color $color-text-s
          &.all, &.recommend
            background rgba(0, 160, 220, 0.2)
          &.negative
            background rgba(77, 85, 93, 0.2)
          &.active.all, &.active.recommend
            background $color-blue
            color $color-white
          &.active.negative
            background $color-background-s
            color $color-white
          .count
            margin-left 4px
            font-size 8px
      .switch
        display inline-block
        margin 12px 0 0
        .icon-check_circle
          margin-right 4px
          vertical-align middle
          font-size $fontsize-large-xxx
          color $color-text-ss
          &.active
            color $color-green
        .text
          vertical-align middle
          line-height 24px
          font-size $fontsize-medium
          color $color-text-ss
    .ratings
      .item
        padding 16px 0 0
        &:first-child
          padding 0
        .rating-flex
          display flex
          justify-content space-between
          .time
            line-height 12px
            font-size $fontsize-small-s
            color $color-text-ss
          .user
            line-height 12px
            font-size $fontsize-small-s
            color $color-text-ss
            img
              margin-left 6px
              width 12px
              height 12px
              border-radius 50%
        .rating-text
          .ico
            display inline
            line-height 24px
            font-size $fontsize-small
            margin-right 4px
            &.icon-thumb_up
              color $color-blue
            &.icon-thumb_down
              color $color-text-ss
          .text
            display inline
            line-height 24px
            font-size $fontsize-small
            color $color-text
          .no-text
            display inline-block
            line-height 24px
            font-size $fontsize-small
            color $color-text-ss
        .line
          margin-top 16px
          border-1px($color = $color-row-line)
    .no-rating
      font-size $fontsize-medium
      color $color-text-s
      text-align center
</style>
